<template>
  <div class="wrap">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">工业物联网Scada解决方案</span>
        <span class="banner-main__subtitle">SCADA产品为广泛的工业自动化行业提供了SCADA和HMI解决方案，用于涉及工业自动化领域监视和控制实时数据的任何过程。</span>
        <div class="size-box__column"></div>
        <span class="banner-main__btn" @click="showDialog">服务咨询</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">操作展示</h1>
        <h6 class="model-desc">Operation display</h6>
        <div class="card">
          <span class="description">
            针对不同的工厂工业自动化现场的运行设备进行监视和控制，以实现数据采集、设备控制、测量、参数调节以及各类信号报警等各项功能。<br />               
          </span>
          <div class="size-box__column"></div>
          <div align="center"><img src="@/assets/fuxa-home.png" width="1000px" /></div>
          <div align="center"><img src="@/assets/fuxa-device.gif" width="1000px" /></div>
          <div align="center"><img src="@/assets/fuxa-ani.gif" width="1000px" /></div>         
          <div align="center"><img src="@/assets/fuxa-editor.png" width="1000px" /></div>          
        </div>
      </div>
    </div>
    <!-- <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案业务架构</h1>
        <h6 class="model-desc">Scheme business architecture</h6>
        <Streamer>
          <p style="line-height: 28px; font-size: 14px;">
            系统按照数据接入、分析预警、告警展示、态势感知功能过程进行设计其中态势感知包括网络入侵态势感知、异常流量态势感知、僵木蠕传播态势感知、高级恶意威胁检测、网站安全态势感知、系统漏洞态势感知六部分。数据接入源包括入侵检测/防护系统、流量分析系统、网站安全监测/防护系统、流量分析系统、漏洞扫描系统、未知威胁检测系统。
            <br />
            流量接入后首先经过入侵检测/防护系统处理后，Netflow数据转发到流量分析系统处理后经过底层大数据平台分析，到达态势感知平台；未识别的恶意文件转发到未知威胁检测系统，处理后经过底层大数据平台分析，到达态势感知平台。网站安全检测系统、漏洞扫描系统结果数据接入经脆弱性分析模块到达态势感知平台，由态势感知平台统一展示，整体流程如下图所示：
          </p>
        </Streamer>
        <img style="margin: 20px auto 0px; display: block;" src="@/assets/mind1.png" width="515px" height="227px" />
      </div>
    </div> -->
    <div class="model">
        <div class="solution">
          <h2 class="solution-title">工业物联网应用场景解决方案</h2>
          <div class="size-box__column"></div>
          <div class="size-box__column"></div>
          <h4 class="solution-title-sec">
            通过web在线设计即编即用，面向各行业工业互联网Scada的解决方案
          </h4>
          <div class="size-box__column"></div>
          <div class="size-box__column"></div>
          <div class="solution-box">
            <ul class="solution-row" v-for="(row, index) in solutions" :key="index">
              <li
                class="solution-item"
                v-for="(item, i) in row"
                :key="i"
                :style="{ backgroundImage: `url(${item.background})` }"
              >
                <div class="solution-item__mask"></div>
                <div class="solution-item__text">
                  <i
                    class="solution-item__text--icon"
                    :style="{ backgroundImage: `url(${item.icon})` }"
                  ></i>
                  <p class="solution-item__text--title">{{ item.title }}</p>
                  <p class="solution-item__text--desc">{{ item.desc }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- <h1 class="model-title">方案总览</h1>
        <h6 class="model-desc">Scheme overview</h6>
        <div class="card">
          <strong style="font-weight:bold">能源监控和管理解决方案</strong>
          <div class="size-box__column"></div>
          <span class="description">
            SCADA 的实时能源解决方案正在帮助减少能源消耗，降低成本，并改善世界各地工业，商业和住宅设施的整体生活质量。<br />
            <div class="size-box__column"></div>
            HVAC系统，照明，安全系统 – 消耗电力的一切都是提高效率和降低成本的机会。<br />
            <div class="size-box__column"></div>
            使用先进的实时可视化工具来监控和控制消耗。 查看实时和历史趋势来分析使用模式和计划优化策略。 配置警报以检测和通知需求中的异常尖峰。<br />
            <div class="size-box__column"></div>
            通过任何Web浏览器远程监控和管理任意数量的设施。 您的SCADA解决方案将允许您：<br />
          </span>
          <div class="size-box__column"></div>
          <ul style="line-height:28px">
            <li>1、分析和可视化来自数百个潜在源的数据，包括：传感器，逻辑控制器，网络设备，数据库等。</li>
            <li>2、使用分析工具和任务自动化创建，实施和实施优化策略。</li>
            <li>3、缩放解决方案以在单个信息模型中的任意数量的位置包含任意数量的资产。</li>
          </ul>
          <div class="size-box__column"></div>
          <hr>
          <div class="size-box__column"></div>
          <strong style="font-weight:bold">水与污水处理</strong>
          <div class="size-box__column"></div>
          <span class="description">
            SCADA 的软件用于监测和控制水处理，分配和水管理的所有方面。<br />
            <div class="size-box__column"></div>
            SCADA 产品经常用于远程监控泵站和升降站，允许单个Web界面显示与水位，泵活动，电压，噪声级别，流量相关的实时数据 – 包括来自逻辑控制器，传感器 ，数据库和用户在统一的信息模型中。<br />
          </span>
          <div class="size-box__column"></div>
          <hr>
          <div class="size-box__column"></div>
          <strong style="font-weight:bold">工厂与制造业</strong>
          <div class="size-box__column"></div>
          <span class="description">
            SCADA 的软件为制造商提供强大的数据可视化和监控工具，可以消除管理层和生产车间之间的信息差距，同时减少应用开发时间和运营成本。<br />
            <div class="size-box__column"></div>
            提高的制造效率由上游和下游工艺的同步驱动。 整合和组织生产，维护，供应链和其他业务数据，实时可视化，分析，报警和自动化。<br />
          </span>
          <div class="size-box__column"></div>
          <hr>
          <div class="size-box__column"></div>
          <strong style="font-weight:bold">运输和物流</strong>
          <div class="size-box__column"></div>
          <span class="description">
            SCADA 的车队和公共交通系统解决方案可以帮助提高安全性和效率，同时降低燃料和维护成本。 通过为您的操作专门创建的定制控制面板和仪表板的统一系统，控制调度，货物分配，燃料消耗，以及操作信号和开关。<br />
            <div class="size-box__column"></div>
            SCADA 解决方案可用于管理卡车或船队，公共交通系统或任何需要连续访问实时数据的运输系统。<br />
          </span>
          <div class="size-box__column"></div>
          <hr>
          <div class="size-box__column"></div>
          <strong style="font-weight:bold">输配电</strong>
          <div class="size-box__column"></div>
          <span class="description">
            公用事业公司的输电和配电系统每天影响数百，数千甚至数百万的人。 它在工作正常时几乎不被关注，但是当它发生故障时非常明显。 SCADA 的智能电网软件技术非常适合于监控和管理发电资源，传输和分配过程，服务请求，工作订单 – 现代电力运营的任何和所有组件。<br />
            <div class="size-box__column"></div>
            整合来自不同资源的数据，用于实时可视化，分析和自动化。 目前支持的通讯协议：MODBUS,CDT,101,102,103,104,南自103,DTL645,376.1,JCT188…<br />
          </span>
          <div class="size-box__column"></div>
          <hr>
          <div class="size-box__column"></div>
          <strong style="font-weight:bold">农业</strong>
          <div class="size-box__column"></div>
          <span class="description">
            SCADA 的软件技术用于监测和控制灌溉系统，饲料储存，牲畜围栏等。 随着精细农业的普及，农业企业正在寻找新的方法来提高产量，同时减少浪费和减少对农药的需求。<br />
            <div class="size-box__column"></div>
            在单个监控和控制系统中合并来自多个位置的多个资产的数据。<br />
          </span>
          <div class="size-box__column"></div>
          <hr>
          <div class="size-box__column"></div>
          <strong style="font-weight:bold">石油化工</strong>
          <div class="size-box__column"></div>
          <span class="description">
            石油，天然气和石化公司需要能够轻松地管理其日常运营，同时遵守监管要求。 信息建模对于管理大量不同和地理上分散的资产的任何操作变得至关重要。<br />
            <div class="size-box__column"></div>
            监控和控制地理隔离的井口，泵站和冷却塔等，所有这些都在同一个地点。 通过将单个应用程序连接在一个更有凝聚力的操作管理环境中，可以在从应用程序开发到流水线分发的领域中节省成本 SCADA 拥有您的软件平台<br />
          </span>
          <div class="size-box__column"></div>
          <hr>
          <div class="size-box__column"></div>
          <strong style="font-weight:bold">生物技术</strong>
          <div class="size-box__column"></div>
          <span class="description">
            当使用生活系统时，获得可靠和准确的实时数据是必不可少的。 SCADA 的产品提供监控和控制生物技术过程中数据所需的先进工具。 随着这些行业的不断发展，拥有可扩展，可定制的数据可视化解决方案可以显着减少频繁更新软件的需要。 状态可以轻松修改过程控制和HMI屏幕，以跟上知识和技术的进步。<br />
            <div class="size-box__column"></div>
            药物生产，生物工程和其他生物技术过程可以极大地受益于状态部署。<br />
          </span>
          <div class="size-box__column"></div>
          <hr>
          <div class="size-box__column"></div>
          <strong style="font-weight:bold">数字标牌</strong>
          <div class="size-box__column"></div>
          <span class="description">
            SCADA 是一个强大的软件设计解决方案，为您的数字标牌显示需要。 使用SCADA，公司可以显示有意义的实时信息，例如来自其SCADA系统的销售或制造数据，循环为公司访问者生成的一系列消息，内部培训或其他员工消息，或显示基于Web的Feed，如股市数据 ，天气，新闻和更多。<br />
            <div class="size-box__column"></div>
            优化与SCADA的通信。 在任何类型的显示器上显示您的信息，包括等离子或液晶显示屏，数字广告牌或信息亭，并从过道或全局远程控制。 SCADA允许您更有效地管理和交付您的数字标牌内容，节省您的时间和金钱。<br />
            <div class="size-box__column"></div>
            SCADA 是数字标牌应用在企业通信，教育，旅游，零售，金融服务，餐馆，会议等领域的完美解决方案。<br />          
          </span>
        </div> -->
    </div>
    <!-- <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案优势</h1>
        <h6 class="model-desc">Scheme advantage</h6>
        <div class="row" v-for="(item, index) in list" :key="index">
          <div class="row-box" v-for="(sub, i) in item" :key="i">
            <div class="row-icon">
              <img :src="sub.icon" />
            </div>
            <h2 style="line-height: 28px">{{sub.title}}</h2>
          </div>
        </div>
      </div>
    </div> -->
    <!-- <div class="model">
      <div class="model-main">
        <h1 class="model-title">客户案例</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <div class="card-box">
            <b style="font-weight:bold">1、	华龙网</b><br />
            云间业务负载迁移服务帮助华龙网将重要的业务系统从原来的360公共云平台迁移至重庆安全云平台。
          </div>
          <div class="card-box">
            <b style="font-weight:bold">2、 中冶集团</b><br />
            帮助中冶集团将门户网站、部分二级单位的OA、邮件等业务系统迁移至中冶云平台。
          </div>
          <div class="card-box">
            <b style="font-weight:bold">3、 华讯方舟</b><br />
            助力华讯方舟的数据中心,以及合作的电信运营商,完成大量的业务系统迁移。
          </div>  
        </div>
      </div>
    </div> -->
    <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.prop1" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="优惠活动" value="value2"></el-option>
            <el-option label="售后服务" value="value3"></el-option>
            <el-option label="商务合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.prop2"
            ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.prop3">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.prop4">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.prop5">
          </el-input>
        </el-form-item>
        <el-form-item label="所在行业" :label-width="formLabelWidth">
          <el-select v-model="form.prop6" style="width:380px">
            <el-option label="政府" value="value1"></el-option>
            <el-option label="教育" value="value2"></el-option>
            <el-option label="医疗" value="value3"></el-option>
            <el-option label="传媒" value="value4"></el-option>
            <el-option label="金融" value="value5"></el-option>
            <el-option label="互联网" value="value6"></el-option>
            <el-option label="IT" value="value7"></el-option>
            <el-option label="制造" value="value8"></el-option>
            <el-option label="能源" value="value9"></el-option>
            <el-option label="化工" value="value10"></el-option>
            <el-option label="汽车" value="value11"></el-option>
            <el-option label="物流" value="value12"></el-option>
            <el-option label="农业" value="value13"></el-option>
            <el-option label="建筑" value="value14"></el-option>
            <el-option label="服务" value="value15"></el-option>
            <el-option label="贸易" value="value16"></el-option>
            <el-option label="其他" value="value17"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import Streamer from '@/components/Streamer/Streamer'
export default {
  // components: {
  //   Streamer
  // },
  data () {
    return {
      solutions: [
        [
          {
            title: "楼宇自动化",
            background: require("@/assets/lyzdh.jpg"),
            icon: require("@/assets/lyzdhIcon.png"),
            desc:
              "监控和控制HVAC系统，照明，水，电梯 – 包括所有建筑系统和传感器在一个统一的模型，用于实时监控，分析，报警和自动化。",
          },
          {
            title: "能源监控和管理",
            background: require("@/assets/nyjk.jpg"),
            icon: require("@/assets/nyjkIcon.png"),
            desc:
              "实时可视化工具来监控和控制消耗。 查看实时和历史趋势来分析使用模式和计划优化策略。 配置警报以检测和通知需求中的异常尖峰。",
          },
          {
            title: "工厂与制造业",
            background: require("@/assets/gcyzz.jpg"),
            icon: require("@/assets/gcyzz.png"),
            desc:
              "为制造商提供强大的数据可视化和监控工具，可以消除管理层和生产车间之间的信息差距，同时减少应用开发时间和运营成本，提高的制造效率由上游和下游工艺的同步驱动。 整合和组织生产，维护，供应链和其他业务数据，实时可视化，分析，报警和自动化。",
          },
          {
            title: "运输和物流",
            background: require("@/assets/logistics.jpg"),
            icon: require("@/assets/car.png"),
            desc:
              "车队和公共交通系统解决方案可以帮助提高安全性和效率，同时降低燃料和维护成本。 通过为您的操作专门创建的定制控制面板和仪表板的统一系统，控制调度，货物分配，燃料消耗，以及操作信号和开关。",
          },
        ],
        [
          {
            title: "输配电",
            background: require("@/assets/spd.jpg"),
            icon: require("@/assets/transmission-tower.png"),
            desc:
              "监控和管理发电资源，传输和分配过程，服务请求，工作订单 – 现代电力运营的任何和所有组件，监控和管理发电资源，传输和分配过程，服务请求，工作订单 – 现代电力运营的任何和所有组件。",
          },
          {
            title: "石油化工",
            background: require("@/assets/syhg.jpg"),
            icon: require("@/assets/Petroleum_fill.png"),
            desc:
              "监控和控制地理隔离的井口，泵站和冷却塔等，所有这些都在同一个地点。 通过将单个应用程序连接在一个更有凝聚力的操作管理环境中，可以在从应用程序开发到流水线分发的领域中节省成本。",
          },
          {
            title: "生物技术",
            background: require("@/assets/swjs.jpg"),
            icon: require("@/assets/biology-o.png"),
            desc:
              "提供监控和控制生物技术过程中数据所需的先进工具，拥有可扩展，可定制的数据可视化解决方案可以显着减少频繁更新软件的需要。 状态可以轻松修改过程控制和HMI屏幕。",
          },
          {
            title: "数字标牌",
            background: require("@/assets/szbp.jpg"),
            icon: require("@/assets/screen.png"),
            desc:
              "优化与SCADA的通信。 在任何类型的显示器上显示信息，并从过道或全局远程控制。 SCADA更有效地管理和交付您的数字标牌内容，节省您的时间和金钱。",
          },
        ],
      ],
      list: [
        [
          { icon: require('@/assets/icon_01.png'), title: '同一系统，可以多次迁移；' },
          { icon: require('@/assets/icon_02.png'), title: '迁移前，可方便的进行迁移演练，验证迁移计划可行性；' }
        ],
        [
          { icon: require('@/assets/icon_03.png'), title: '对现有系统几乎没有什么要求，也不会有什么影响；' },
          { icon: require('@/assets/icon_04.png'), title: '99%的业务迁移成功率，为用户提供可靠的迁移保障。' }
        ],
        [
          { icon: require('@/assets/icon_05.png'), title: '数据迁移过程，业务连续性不会中断，只有切换时的秒断；' },
          { icon: require('@/assets/icon_06.png'), title: '即使新系统仍然在运行，也能保证数据一致性，迁移后的新系统与源系统一样；' }
        ],
        [
          { icon: require('@/assets/icon_07.png'), title: '独有的PCI虚拟技术，驱动智能匹配，轻松解决老系统到新平台的硬件兼容性问题；' },
          { icon: require('@/assets/icon_08.png'), title: '不论源业务系统是Windows还是Linux，统一的图形化操作界面，精简的操作步骤，只需简单点击鼠标，几步操作就可以完成迁移；' }
        ],
        [
          { icon: require('@/assets/icon_09.png'), title: '与应用系统的具体业务无关，从系统底层打包数据，所以无需了解业务系统的具体细节，只需了解一些从应用系统外部很容易了解的信息，如操作系统版本，分布于几个磁盘，数据量有多大等就可以实施迁移；' },
        ]
      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      form: {
        prop1: '',
        prop2: '',
        prop3: '',
        prop4: '',
        prop5: '',
        prop6: '',
      }
    }
  },
  methods: {
    showDialog () {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/variables.less';

.wrap {
  background-color: rgb(246, 246, 246);
}

.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/scada.jpg') no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.model {
  padding: 60px 0;
  .model-main {
    width: 1200px;
    margin: 0 auto;
    .card {
      .card-box {
        margin-bottom: 15px;
        line-height: 28px;
      }
    }
    .row {
      margin-right: -8px;
      margin-right: -8px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .row-box {
        display: flex;
        flex: 1;
        align-items: center;
        background-color: #2a3f74;
        color: #698acd;
        border: 1px #405b9f solid;
        padding: 20px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .row-icon {
          width: 46px;
          height: 46px;
          margin-right: 20px;
        }
      }
      .row-card {
        background: #2a3f74;
        color: #698acd;
        padding: 15px;
        padding-left: 95px;
        line-height: 28px;
        margin-bottom: 15px;
        border: 1px #405b9f solid;
      }
    }
  }
  .model-title {
    color: #403d56;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .model-desc {
    color: #bababa;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
    .card{
      .description{
      line-height: 28px;
      }
    }
  }
  &:nth-child(odd) {
    background: rgb(32, 50, 96);
    .model-title {
      color: rgb(97, 145, 221);
    }
    .model-desc {
      color: rgb(70, 106, 170);
    }
  }
}

.card {
  @box_shadow();
  width: 100%;
  padding: 30px;
  background: #fff;
}
.description{
  line-height: 28px;
}

// ::marker {
//     unicode-bidi: isolate;
//     font-variant-numeric: tabular-nums;
//     text-transform: none;
//     text-indent: 0px !important;
//     text-align: start !important;
//     text-align-last: start !important;
// }

.solution {
  padding: 50px 50px 30px 50px;
  .solution-title {
    text-align: center;
    color: white;
    font-size: 40px;
    font-weight: bold;
  }
  .solution-title-sec {
    text-align: center;
    color: white;
  }
  .solution-box {
    width: 1280px;
    margin: 0 auto;
    .solution-row {
      display: flex;
      .solution-item {
        flex: 1;
        margin-right: 20px;
        margin-bottom: 20px;
        transition: all 0.65s;
        cursor: pointer;
        background-image: linear-gradient(
          180deg,
          transparent 0,
          rgba(0, 0, 0, 0.5)
        );
        background-size: cover;
        background-position: 0;
        overflow: hidden;
        position: relative;
        &:last-child {
          margin-right: 0;
          height: 316px;
        }
        .solution-item__mask {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-image: linear-gradient(
            180deg,
            transparent 0,
            rgba(0, 0, 0, 0.5)
          );
          transition: 0.65s;
          opacity: 0;
        }
        .solution-item__text {
          position: absolute;
          top: 0;
          left: 32px;
          right: 32px;
          height: 164px;
          transition: 0.65s;
          margin-top: 196px;
          .solution-item__text--icon {
            display: block;
            width: 48px;
            height: 48px;
            background-size: contain;
            margin-bottom: 16px;
            font-size: 48px;
            color: inherit;
            background-repeat: no-repeat;
          }
          .solution-item__text--title {
            position: relative;
            font-size: 16px;
            line-height: 20px;
            color: #fff;
            margin-bottom: 34px;
            &::after {
              content: "";
              position: absolute;
              left: 0;
              top: 100%;
              width: 34px;
              border-top: 2px solid;
              margin-top: 16px;
              opacity: 0;
              transition: 0.2s;
              background-color: #fff;
            }
          }
          .solution-item__text--desc {
            width: 420px;
            font-size: 14px;
            line-height: 22px;
            opacity: 0;
            transition: 0.2s;
            color: #fff;
          }
        }
        &:hover {
          flex: 2;
          .solution-item__mask {
            opacity: 1;
          }
          .solution-item__text {
            margin-top: 80px;
            .solution-item__text--title {
              &::after {
                opacity: 1;
              }
            }
            .solution-item__text--desc {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
</style>
